import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/widgets.dart';

main() =>
    runApp(MaterialApp(debugShowCheckedModeBanner: false, home: HomePage()));
var text =
    '科克斯巴扎尔（孟加拉语：কক্সবাজার、英语：Cox\'s Bazar）是孟加拉国东南部吉大港专区滨海的一座城市，位于吉大港市南部150公里，为一座渔港，以世界上最长的天然沙滩（120公里）闻名。科克斯巴扎尔的别称为Panowa，意为黄色的花朵。';
var coxsBazarBG = 'https://i1.bvimg.com/688304/580faa691c0d7d0c.jpg';
var coxsBazarPre1 = 'https://i1.bvimg.com/688304/df0566096fac4bd8.jpg';
var coxsBazarPre2 = 'https://i1.bvimg.com/688304/010f41961ad5ec38.jpg';
var coxsBazarPre3 = 'https://i1.bvimg.com/688304/0d534c6290719802.jpg';
var coxsBazarPre4 = 'https://i1.bvimg.com/688304/8b28ac608c8a9202.jpg';
var pinkColor = Color(0xFFab00ed);

class HomePage extends StatefulWidget {
  @override
  createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  build(context) => Scaffold(
        body: Container(
            child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              height: MediaQuery.of(context).size.height / 3,
              width: double.infinity,
              child: Image.network(coxsBazarBG, fit: BoxFit.cover),
            ),
            SizedBox(
              height: 16.0,
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 32.0),
              child: Column(
                children: [
                  Row(
                    children: [
                      Text(
                        "科克斯巴扎尔",
                        style: TextStyle(
                            fontSize: 26.0, fontWeight: FontWeight.bold),
                      ),
                      SizedBox(
                        width: 20.0,
                      ),
                      Container(
                        decoration: BoxDecoration(
                            color: pinkColor.withOpacity(0.2),
                            borderRadius: BorderRadius.circular(4.0)),
                        child: Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Text(
                            '海滩',
                            style: TextStyle(color: pinkColor, fontSize: 12.0),
                          ),
                        ),
                      )
                    ],
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 8.0,
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 28.0),
              child: Row(
                children: [
                  Icon(
                    Icons.location_on,
                    color: pinkColor.withOpacity(0.7),
                  ),
                  Text(
                    '孟加拉国',
                    style: TextStyle(color: Colors.grey),
                  )
                ],
              ),
            ),
            SizedBox(
              height: 16.0,
            ),
            Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 32.0,
              ),
              child: Text(
                text,
                style: TextStyle(color: Colors.black87, height: 1.1),
                overflow: TextOverflow.ellipsis,
                maxLines: 5,
              ),
            ),
            SizedBox(
              height: 16.0,
            ),
            Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 32.0,
              ),
              child: Text(
                '本周最佳风景',
                style: TextStyle(color: Colors.grey),
              ),
            ),
            ImagesSection(),
            SizedBox(
              height: 4.0,
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 24.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '航班',
                        style: TextStyle(color: Colors.black54),
                      ),
                      Text(
                        '\$120.00',
                        style: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 22.0),
                      )
                    ],
                  ),
                  RaisedButton(
                    color: pinkColor,
                    child: Text(
                      '立即预定',
                      style: TextStyle(color: Colors.white),
                    ),
                    onPressed: () {},
                  )
                ],
              ),
            )
          ],
        )),
      );
}

class ImagesSection extends StatelessWidget {
  @override
  build(context) => Padding(
        padding: EdgeInsets.all(16.0),
        child: Container(
          height: 180.0,
          child: Row(
            children: [
              Expanded(
                flex: 1,
                child: Padding(
                  padding: EdgeInsets.all(6.0),
                  child: Container(
                    height: double.infinity,
                    width: double.infinity,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8.0),
                        image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage(coxsBazarPre1))),
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: Column(
                  children: [
                    Expanded(
                      flex: 1,
                      child: Padding(
                        padding: EdgeInsets.all(6.0),
                        child: Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8.0),
                              image: DecorationImage(
                                  fit: BoxFit.cover,
                                  image: NetworkImage(coxsBazarPre2))),
                          height: double.infinity,
                          width: double.infinity,
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: Row(
                        children: [
                          Expanded(
                            flex: 1,
                            child: Padding(
                              padding: EdgeInsets.all(6.0),
                              child: Container(
                                height: double.infinity,
                                width: double.infinity,
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(8.0),
                                    image: DecorationImage(
                                        fit: BoxFit.cover,
                                        image: NetworkImage(coxsBazarPre3))),
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: Padding(
                                padding: EdgeInsets.all(6.0),
                                child: Stack(
                                  children: [
                                    Container(
                                      height: double.infinity,
                                      width: double.infinity,
                                      decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(8.0),
                                          image: DecorationImage(
                                            fit: BoxFit.cover,
                                            image: NetworkImage(coxsBazarPre4),
                                          )),
                                    ),
                                    Container(
                                      height: double.infinity,
                                      width: double.infinity,
                                      decoration: BoxDecoration(
                                        borderRadius:
                                            BorderRadius.circular(8.0),
                                        color: pinkColor.withOpacity(0.4),
                                      ),
                                      child: Center(
                                          child: Text(
                                        '+24',
                                        style: TextStyle(
                                            color: Colors.white,
                                            fontWeight: FontWeight.bold,
                                            fontSize: 16.0),
                                      )),
                                    )
                                  ],
                                )),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      );
}
